<template>
  <div>
    <basic-container>
      <avue-crud :option="option"
        :table-loading="loading"
        :data="data"
        :page="page"
        ref="crud"
        v-model="form"
        @row-del="rowDel"
        @search-change="searchChange"
        @search-reset="searchReset"
        @selection-change="selectionChange"
        @current-change="currentChange"
        @size-change="sizeChange"
        @on-load="onLoad"
      >
        <template slot="menuLeft">
          <el-button v-show="!isView" type="primary" size="small" icon="el-icon-plus" @click="handleAdd">新增</el-button>
        </template>
        <template slot-scope="scope" slot="menu">
          <el-button type="text" size="small" @click="handleEdit(scope.row)">编辑</el-button>
        </template>
      </avue-crud>
      <el-dialog
        title="因子等级"
        :visible.sync="dialogVisible"
        width="70%"
        append-to-body
        :close-on-click-modal="false"
        :before-close="handleClose">
        <div>
          <el-form v-model="setRuleForm" label-width="100px" size="small">
            <el-row>
              <el-col :span="12">
                <el-form-item label="因子等级：" prop="grade">
                  <el-select v-model="setRuleForm.grade" placeholder="请选择因子等级">
                    <el-option v-for="grade in gradeList" :key="grade.val" :label="grade.label" :value="grade.val"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否预警：" prop="isWarning">
                  <el-select v-model="setRuleForm.isWarning" placeholder="请选择是否预警">
                    <el-option label="是" :value="true"></el-option>
                    <el-option label="否" :value="false"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="描述：" prop="desc">
                  <el-input type="textarea" rows="3" v-model="setRuleForm.desc" placeholder="请输入描述"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="twoFormOption" label="临界值（下限）：" prop="scoreMin" label-width="130px">
                  <el-select v-model="setRuleForm.scoreMinEmoji" placeholder="请选择包含关系">
                    <el-option value=">" label="大于"></el-option>
                    <el-option value=">=" label="大于等于"></el-option>
                  </el-select>
                  <el-input type="number" v-model="setRuleForm.scoreMin" placeholder="请输入低分限制"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item class="twoFormOption" label="临界值（上限）：" prop="scoreMax" label-width="130px">
                  <el-select v-model="setRuleForm.scoreMaxEmoji" placeholder="请选择包含关系">
                    <el-option value="<" label="小于"></el-option>
                    <el-option value="<=" label="小于等于"></el-option>
                  </el-select>
                  <el-input type="number" v-model="setRuleForm.scoreMax" placeholder="请输入高分限制"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="个人解释：" prop="personExplain">
                  <el-input type="textarea" rows="7" v-model="setRuleForm.personExplain" placeholder="请输入个人解释"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="团体解释：" prop="teamExplain">
                  <el-input type="textarea" rows="7" v-model="setRuleForm.teamExplain" placeholder="请输入团体解释"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="24">
                <el-form-item label="建议：" prop="suggest">
                  <el-input type="textarea" rows="7" v-model="setRuleForm.suggest" placeholder="请输入建议"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </div>
        <span  slot="footer" class="dialog-footer">
          <el-button size="small" @click="handleClose">取 消</el-button>
          <el-button size="small" type="primary" :loading="saveLoading" @click="onsave">保 存</el-button>
        </span>
      </el-dialog>
    </basic-container>
  </div>
</template>
<script>
import {
  getAnalyseRuleList,
  addAnalyseRule,
  delAnalyseRule,
} from '@/api/platform/templateManage'
export default {
  props: {
    scaleId: {
      type: String,
      default: ''
    },
    templateId: {
      type: String,
      default: ''
    },
    isView: {
      type: Boolean,
      default: true
    }
  },
  watch: {
    isView: {
      handler(newVal) {
        this.option.menu = !newVal
      },
      immediate: true
    }
  },
  data() {
    return {
      form: {},
      loading: true,
      selectionList: [],
      query: {},
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      data: [],
      option: {
        // height: 'auto',
        searchShow: true,
        searchMenuSpan: 6,
        tree: false,
        tip: false,
        border: true,
        index: true,
        selection: true,
        addBtn: false,
        menuWidth: 200,
        editBtn: false,
        viewBtn: false,
        column: [
        {
            label: "因子等级",
            prop: "grade",
            search: false,
            rules: [
              {
                required: true,
                message: "请输入因子等级",
                trigger: "blur"
              }
            ]
          },
          {
            label: "描述",
            prop: "desc",
            width: 150,
            rules: [
              {
                required: true,
                message: "请输入量表维度",
                trigger: "blur"
              }
            ]
          },
          {
            label: "临界值（下限）",
            prop: "scoreMin",
            // search: true,
            formatter(row, column, value) {
              if(value == -1) return ''
              else return `${row.scoreMinEmoji || ''}${value}`
            },
          },
          {
            label: "临界值（上限）",
            prop: "scoreMax",
            // search: true,
            formatter(row, column, value) {
              if(value == -1) return ''
              else return `${row.scoreMaxEmoji || ''}${value}`
            },
          },
          {
            label: "个人解释",
            prop: "personExplain",
            width: 230,
          },
          {
            label: "团体解释",
            prop: "teamExplain",
            width: 230,
          },
          {
            label: "是否预警",
            prop: "isWarning",
            formatter: (row, column, value) => {
              return value ? "是" : "否"
            }
          },
          {
            label: "建议",
            prop: "suggest",
            width: 230,
          },
          // {
          //   label: "结果解释",
          //   prop: "resultExplain",
          //   // search: true,
          //   rules: [
          //     {
          //       required: true,
          //       message: "请输入量表维度",
          //       trigger: "blur"
          //     }
          //   ]
          // },
        ]
      },
      dialogVisible: false,
      setRuleForm: {
        grade: '',
        isWarning: '',
        desc: '',
        scoreMin: '',
        scoreMax: '',
        personExplain: '',
        teamExplain: '',
        suggest: '',
      },
      rowId: '',
      saveLoading: false,
      gradeList: [
        {
          label: '一级',
          val: 1
        },
        {
          label: '二级',
          val: 2
        },
        {
          label: '三级',
          val: 3
        },
        {
          label: '四级',
          val: 4
        },
        {
          label: '五级',
          val: 5
        }
      ]
    }
  },
  methods: {
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    rowDel(row) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return delAnalyseRule({ids: row.id});
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
        });
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    currentChange(currentPage) {
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      const d = {
        current: page.currentPage,
        size: page.pageSize,
        templateId: this.templateId,
        scaleId: this.scaleId,
        ...Object.assign(params, this.query)
      }
      getAnalyseRuleList(d).then(res => {
        this.loading = false;
        this.page.total = res.data.data.total;
        this.data = res.data.data.records;
      })
    },
    handleAdd() {
      this.dialogVisible = true;
    },
    handleEdit(row) {
      this.dialogVisible = true;
      this.rowId = row.id
      this.setRuleForm = {
        ...row,
        // desc: row.desc,
        scoreMin: row.scoreMin == -1 ? '' : row.scoreMin,
        scoreMax: row.scoreMax == -1 ? '' : row.scoreMax,
        // resultExplain: row.resultExplain,
      }
    },
    handleClickTab() { },
    handleClose() {
      this.dialogVisible = false;
      this.setRuleForm = {
        grade: '',
        isWarning: '',
        desc: '',
        scoreMin: '',
        scoreMax: '',
        personExplain: '',
        teamExplain: '',
        suggest: '',
      }
      this.rowId = ''
    },
    onsave() {
      let d = {
        templateId: this.templateId,
        scaleId: this.scaleId,
        ...this.setRuleForm,
        scoreMin: this.setRuleForm.scoreMin ? this.setRuleForm.scoreMin : -1,
        scoreMax: this.setRuleForm.scoreMax ? this.setRuleForm.scoreMax : -1,
      }
      this.rowId ? (d.id = this.rowId) : ''
      this.saveLoading = true
      addAnalyseRule(d).then(res => {
        const r = res.data
        if (r.code == 200) {
          this.$message.success(r.msg || '成功')
        }
      }).finally(() => {
        this.onLoad(this.page)
        this.handleClose()
        setTimeout(() => {
          this.saveLoading = false
        }, 500);
      })
    }
  }
}
</script>
<style scoped>
::v-deep.twoFormOption .el-form-item__content{
  display: flex;
}
</style>
